<template>
  <PageLayout>
    <template #header>
      <BasicForm :labelWidth="130" :options="queryOptions" @ok="onQueryDataByParams"></BasicForm>
    </template>
    <div class="table-box">
      <div class="head-box">
        <div class="title">游戏管理</div>
        <a-space :size="16">
          <a-button type="primary" @click="edit()">新建</a-button>
          <a-button @click="importFile()">导入</a-button>
        </a-space>
      </div>
      <div class="bg-fff">
        <!-- :apiFetch="postGamePage"  -->
        <BasicTable ref="tableRef" :columns="columns" :query-params="queryData" :apiFetch="postGamePage">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'coverUrl'">
              <a-image :height="50" :width="50" :src="record.coverUrl" />
            </template>
            <template v-if="column.key === 'backgroundUrl'">
              <a-image :height="50" :width="50" :src="record.backgroundUrl" />
            </template>
            <template v-if="column.key === 'action'">
              <a-space class="space-btn--box" :size="10">
                <a class="btn" @click="edit(record)">编辑</a>
                <a class="btn" @click="remove(record)">删除</a>
              </a-space>
            </template>
          </template>
        </BasicTable>
      </div>
    </div>

    <UploadModal ref="uploadModalRef" />
  </PageLayout>
</template>

<script name="game-list" setup>
import {
  postGamePage,
  postGameDelete,
  postClientUserExport,
  postClientUserUpdateStatus,
  postGameClassifyList,
} from "@/api/common";
import { useStoreCommonEnum } from "@/store";
import { comfirmModal } from "@/hooks/useModal";
import { message } from "ant-design-vue";
const storeCommonEnum = useStoreCommonEnum();
const router = useRouter();
const dataSource = ref(
  Array.from({ length: 11 }, () => ({
    username: "2121",
  }))
);
const queryOptions = ref([
  {
    name: "游戏名称",
    type: "input",
    value: "",
    placeholder: "请输入",
    filed: "name",
    labelCol: { width: "120px" },
  },
  {
    name: "所属类型",
    type: "select",
    value: undefined,
    placeholder: "请输入",
    filed: "gameClassifyList",
    labelCol: { width: "120px" },
    async: async (record) => {
      const res = await postGameClassifyList();
      console.log("res", res);
      record.list = res.data.map((item) => {
        return {
          label: item.nameTw,
          value: item.id,
        };
      });
    },
    attrs: { mode: "multiple" },
  },
  {
    name: "支持系统",
    type: "select",
    value: undefined,
    placeholder: "请选择",
    filed: "sources",
    list: [
      {
        label: "安卓",
        value: "GOOGLE_PLAY",
      },
      {
        label: "IOS",
        value: "APP_STORE",
      },
      {
        label: "安卓&IOS",
        value: "APP_STORE,GOOGLE_PLAY",
      },
    ],
    attrs: { allowClear: true },
    labelCol: { width: "120px" },
  },
  {
    name: "是否支持手柄",
    type: "select",
    value: undefined,
    placeholder: "请选择",
    filed: "handleFlag",
    list: [
      {
        label: "否",
        value: 0,
      },
      {
        label: "是",
        value: 1,
      },
    ],
    attrs: { allowClear: true },
    labelCol: { width: "120px" },
  },
]);
const langeOptions = [
  {
    label: '阿拉伯语',
    value: 'ar',
  },
  {
    label: '丹麦语',
    value: 'da_DK',
  },
  {
    label: '荷兰语',
    value: 'nl_NL',
  },
  {
    label: '芬兰语',
    value: 'fi_FI',
  },
  {
    label: '挪威语',
    value: 'nb_NO',
  },
  {
    label: '波兰语',
    value: 'pl_PL',
  },
  {
    label: '葡萄牙语(葡萄牙)',
    value: 'pt_PT',
  },
  {
    label: '瑞典语',
    value: 'sv_SE',
  },
  {
    label: '韩语',
    value: 'ko_KR',
  },
  {
    label: '英语',
    value: 'en_US',
  },
  {
    label: '法语',
    value: 'fr_FR',
  },
  {
    label: '德语',
    value: 'de_DE',
  },
  {
    label: '西班牙语(西班牙)',
    value: 'sp_SA',
  },
  {
    label: '義大利语',
    value: 'it_IT',
  },
  {
    label: '日语',
    value: 'ja_JP',
  },
  {
    label: '繁体中文',
    value: 'zh_TW',
  },
 
]

const getAndJoinLabels = (values) => {
 
  const labels = values.map(value => {
    const item = langeOptions.find(opt => opt.value === value);
    return item ? item.label : '';
  });
  return labels.filter(label => label).join(',');
};
const columns = [
  {
    title: "序号",
    dataIndex: "index",
    width: "150px",
    customRender: (record) => `${record.index + 1}`,
    ellipsis: true,
  },
  {
    title: "游戏名称",
    dataIndex: "name",
    key: "name",
    width: "200px",
    ellipsis: true,
  },
  {
    title: "所属动作类型",
    dataIndex: "classifyNameTw",
    key: "classifyNameTw",
    width: "200px",
    ellipsis: true,
    sorter: true,
  },
  {
    title: "支持系统",
    dataIndex: "sources",
    key: "sources",
    width: "200px",
    ellipsis: true,
    customRender: ({ record }) =>
      `${record.sources == "APP_STORE"
        ? "IOS"
        : record.sources == "GOOGLE_PLAY"
          ? "安卓"
          : "安卓&IOS"
      }`,
  },
  {
    title: "所属语言",
    dataIndex: "languages",
    key: "languages",
    width: "200px",
    ellipsis: true,
    customRender: ({ record }) =>
    getAndJoinLabels(record.languages.split(","))

  },
  {
    title: "是否支持手柄",
    dataIndex: "handleFlag",
    key: "handleFlag",
    width: "200px",
    ellipsis: true,
    customRender: ({ record }) => `${record.handleFlag == 0 ? "否" : "是"}`,
  },
  {
    title: "排序",
    dataIndex: "sort",
    key: "sort",
    width: "200px",
    ellipsis: true,
  },
  {
    title: "游戏封面",
    dataIndex: "coverUrl",
    key: "coverUrl",
    width: "200px",
    ellipsis: true,
  },
  {
    title: "游戏背景图",
    dataIndex: "backgroundUrl",
    key: "backgroundUrl",
    width: "200px",
    ellipsis: true,
  },
  {
    title: "Google Play下载地址",
    dataIndex: "googlePlayUrl",
    key: "googlePlayUrl",
    width: "200px",
    ellipsis: true,
  },
  {
    title: "Appstore下载地址",
    dataIndex: "appStoreUrl",
    key: "appStoreUrl",
    width: "200px",
    ellipsis: true,
  },

  {
    title: "更新时间",
    dataIndex: "updateTime",
    key: "updateTime",
    width: "200px",
    ellipsis: true,
  },

  {
    title: "操作",
    fixed: "right",
    dataIndex: "action",
    key: "action",
    width: 200,
  },
];

const queryData = reactive({});
const tableRef = ref(null);
const onQueryDataByParams = (params) => {
  for (let key in params) {
    queryData[key] = params[key];
  }
  tableRef.value.refreshTableData();
};
const edit = (record) => {
  router.push({
    path: "/game/edit",
    query: {
      id: record?.id,
    },
  });
};

const uploadModalRef = ref(null)

const importFile = () => {
  console.log('导入文件');
  console.log('uploadModalRef.value--', uploadModalRef.value);
  uploadModalRef.value.show = true
}

const toDetail = (record) => {
  router.push({
    path: "/feedback/detail",
    query: {
      id: record?.id,
    },
  });
};

const changeStatus = (record) => {
  const title = `${record.status ? "启用" : "停用"}`;
  comfirmModal({
    content: `确认${title}该用户账号吗？`,
    onOk() {
      postClientUserUpdateStatus({
        id: record.id,
        status: !record.status,
      }).then(() => {
        message.success(`${title}成功`);
        tableRef.value.fetch();
      });
    },
  });
};
const remove = ({ id }) => {
  comfirmModal({
    content: "确认删除该游戏",
    onOk() {
      postGameDelete({ id }).then(() => {
        message.success("删除成功");
        tableRef.value.fetch();
      });
    },
  });
};

// const importFile = () => {
//   if (!tableRef.value.data?.length) {
//     message.error("暂无数据");
//     return;
//   }
//   const params = {};

//   for (let key in queryData) {
//     params[key] = queryData[key];
//   }
//   postClientUserExport(params).then((res) => {
//     message.success("导出成功");
//   });
// };
</script>

<style lang="less" scoped></style>
